<template>
	<view class="gouwuche">
		<headertop title="购物车" str1="oridei" :back1="back1"></headertop>
		<view class="gouwuchetopback">

		</view>
		<view class="msgicon" v-if="!arr.length">
			<image src="/static/微信图片_20250514232056.png" mode="widthFix"></image>
			<view class="msgtext">
				暂无商品
			</view>
		</view>
		<view class="contentbox" v-if="arr.length">
			<view class="contentboxcenter">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 24443@2x.png"
					class="contentboxcenterback" mode="">
				</image>
				<view class="linetopbox">
					<view class="title">
						<view class="active">

						</view>
						商品信息
					</view>
					<view class="text">
						共 <span style="color: #fff;">{{arr.length}}</span> 种商品
					</view>
					<view class="btngli" @click="ll">
						管理
					</view>
				</view>
				<view class="contents">

					<view class="itemboxs" v-for="item in arr" :key="item.id">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Ellipse 2638@2x(1).png"
							@click="item.bool=!item.bool" class="xz" v-if="!item.bool" mode=""></image>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11457@2x.png" class="xz"
							@click="item.bool=!item.bool" mode="" v-else></image>
						<image :src="item.goods.image" class="bigimg" mode=""></image>
						<view class="shicaiinfo">
							<view class="texts">
								<view class="t1">
									{{item.goods.title}}
								</view>
								<view class="t2">
									<span
										style="font-weight: bold;font-size: 32rpx;color: #7EBC79;">￥{{!userobj.level?item.goods.price:item.goods.userprice}}</span>/份
								</view>
							</view>
						</view>
						<view class="gbnum">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11215@2x.png" mode=""
								@click="add('-',item)" class="icon"></image>
							<view class="num">
								{{item.num}}
							</view>
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11214@2x.png" mode=""
								@click="add('+',item)" class="icon"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="fixedbox" v-if="arr.length">
			<view class="centerline">
				<view class="xzbox">
					<image @click="allquanx"
						src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Ellipse 2638@2x(1).png"
						v-if="flag1==false" mode="">
					</image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11457@2x.png" class="xz"
						@click="allquanx" mode="" v-else></image>
					<span>全选</span>
				</view>
				<view class="hejinum" v-if="!flag">
					合计：<span style="font-size: 28rpx;color: #4E5969;font-weight: bold;">￥{{alljiage||'0.00'}}</span>
				</view>
				<image src="/static/微信图片_20250514232115.png" @click="shanchu" style="    width: 80rpx;
    height: 80rpx;
    margin-left: 420rpx;" mode="" v-if="flag"></image>
				<view class="ljzf" v-if="!flag" @click="ljzf">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import {
		addcart,
		delcart
	} from '@/api/commodity.js'
	import headertop from '@/components/header.vue'
	import {
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		cartlist
	} from '@/api/commodity.js'
	import {
		ref,
		computed
	} from 'vue'
	import {
		userinfo
	} from '@/api/my.js'
	const arr = ref([])
	const flag = ref(false)
	const userobj = ref({})
	const flag1 = ref(false)
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#84BD78'
		} else {
			back1.value = ''
		}
	})
	const alljiage = computed(() => {
		var arr1 = arr.value.filter(item => item.bool == true)
		if (!userobj.value.level) {
			var jiage = arr1.reduce((e, item) => {
				return e + item.goods.price * item.num
			}, 0)
		} else {
			var jiage = arr1.reduce((e, item) => {
				return e + item.goods.userprice * item.num
			}, 0)
		}

		return jiage.toFixed(2)
	});
	onLoad(() => {
		init()
		getuser()
	})
	async function getuser() {
		const res = await userinfo()
		if (res.data.code == 1) {
			userobj.value = res.data.data
		}
	}

	function ljzf() {
		var arr1 = arr.value.filter(item => item.bool == true)
		if (!arr1.length) {
			uni.showToast({
				title: '请选择支付商品',
				icon: 'none'
			})
		} else {
			uni.setStorageSync('shangparr', arr1)
			uni.navigateTo({
				url: '/sub_commodity/commodity/zhifudetail?typestr=gouwuche'
			})
		}
	}

	function shanchu() {
		var arr1 = arr.value.filter(item => item.bool == true)
		if (!arr1.length) {
			uni.showToast({
				title: '请选择删除商品',
				icon: 'none'
			})
			return
		}
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要删除吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					shanchu1()
					// 执行确定后的逻辑
				} else if (res.cancel) {
					console.log('用户点击了取消');
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {
				console.error('弹窗调用失败', err);
			}
		});

	}

	async function shanchu1() {
		var arr1 = arr.value.filter(item => item.bool == true)

		var gids = arr1.map(item => item.id)
		const res = await delcart({
			gid: gids.join()
		})
		if (res.data.code == 1) {
			setTimeout(() => {
				uni.showToast({
					title: '删除成功'
				})
			}, 500)
			init()
		}
	}

	function allquanx() {
		flag1.value = !flag1.value

		for (var i in arr.value) {
			arr.value[i]['bool'] = flag1.value
		}
	}

	function ll() {
		console.log(1231321);
		flag.value = !flag.value
	}
	async function init() {
		const res = await cartlist()
		if (res.data.code == 1) {
			arr.value = res.data.data.list
			for (var i in arr.value) {
				arr.value[i]['bool'] = false
			}
			console.log(arr.value, 'arr.valuearr.valuearr.value');
		}
	}
	async function add(type, item) {
		var obj = {
			gid: item.goods.id,
			num: 1,
			adtype: 1
		}
		if (type == '+') {
			obj.adtype = 1
		} else {
			obj.adtype = 2
		}
		const res = await addcart(obj)
		if (res.data.code == 1) {
			init()
		}
	}
</script>

<style lang="scss">
	.msgicon {
		width: 532rpx;
		margin: 200rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #4E5969;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 532rpx;
		}
	}

	.gouwuche {
		width: 100%;
		overflow: hidden;
		position: relative;

		.fixedbox {
			width: 100%;
			height: 184rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			overflow: hidden;
			bottom: 0%;

			.centerline {
				width: 686rpx;
				margin: auto;
				display: flex;
				align-items: center;
				margin-top: 22rpx;

				.ljzf {
					width: 266rpx;
					height: 88rpx;
					background: #7EBC79;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					text-align: center;
					line-height: 88rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-left: 22rpx;
				}

				.hejinum {
					width: 230rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;
					margin-left: 64rpx;
				}

				.xzbox {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}

				}
			}
		}

		.gouwuchetopback {
			width: 750rpx;
			height: 530rpx;
			background: linear-gradient(180deg, #84BD78 0%, rgba(132, 189, 120, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.contentbox {
			width: 686rpx;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			background: #7EBC79;
			margin: auto;
			margin-top: 186rpx;
			overflow: hidden;

			.contentboxcenter {
				width: 638rpx;
				overflow: hidden;
				margin: 24rpx auto;
				position: relative;

				.contentboxcenterback {
					position: absolute;
					width: 642rpx;
					height: 834rpx;
					z-index: 0;
				}

				.contents {
					width: 100%;
					overflow: hidden;
					margin-top: 26rpx;
					max-height: 1100rpx;
					overflow-y: scroll;
					background: #FFFFFF;

					.itemboxs {
						width: 582rpx;
						height: 188rpx;
						border-bottom: 2rpx solid #F7F8FA;
						display: flex;
						align-items: center;
						margin: auto;

						.xz {
							width: 32rpx;
							height: 32rpx;
							z-index: 99999;
						}

						.bigimg {
							width: 152rpx;
							height: 132rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							margin-left: 24rpx;
							z-index: 99999;
						}

						.gbnum {
							display: flex;
							align-items: center;
							width: 126rpx;
							justify-content: space-between;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #4E5969;
							z-index: 999;
							margin-left: 14rpx;
							margin-top: 86rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.shicaiinfo {
							margin-left: 14rpx;
							z-index: 99999;

							.texts {
								width: 200rpx;

								.t1 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #1D2129;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.t2 {
									font-weight: 400;
									font-size: 24rpx;
									color: #4E5969;
									margin-top: 50rpx;
								}
							}
						}
					}
				}

				.linetopbox {
					width: 100%;
					display: flex;
					align-items: center;
					z-index: 9999;

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;
						margin-left: 104rpx;
						margin-top: 18rpx;
					}

					.btngli {
						width: 140rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						text-align: center;
						line-height: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #3F7C3B;
						z-index: 9999;
						margin-left: 42rpx;
						margin-top: 6rpx;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						z-index: 9999;
						color: #1D2129;
						z-index: 9999;
						display: flex;
						align-items: center;
						margin-top: 18rpx;
						margin-left: 20rpx;

						.active {
							width: 6rpx;
							height: 36rpx;
							background: #7EBC79;
							border-radius: 0rpx 24rpx 24rpx 0rpx;
							margin-right: 12rpx;

						}
					}
				}
			}
		}
	}
</style>